<template>
  <div class="seismic_container">
    <div class="card-title" style="margin-bottom: 0.5vh">近期地震速报</div>
    <div
      class="earthquake-list"
      v-for="(item, index) in earthquakeList"
      :key="index + 'earthquake'"
    >
      <div class="earthquake-index">{{ index + 1 }}</div>
      <div class="earthquake-main">
        <div class="earthquake-info">
          <div>{{ item.locname }}</div>
          <div>{{ item.oritime }}</div>
        </div>
        <div
          class="earthquake-value"
          :style="{
            'border-color': Number(item.magnitude) > 6 ? '#f5222d' : '#007adf',
          }"
        >
          <span
            :style="{
              'background-color':
                Number(item.magnitude) > 6 ? '#f5222d' : '#007adf',
            }"
            >{{ item.magnitude }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { ref } from 'vue';
import { getEarthquakeQuickReport } from '@/api/base';

const earthquakeList = ref([]);

const getInfo = async () => {
  const res = await getEarthquakeQuickReport({ pageNum: 1, pageSize: 10 });
  if (res.code == 200) {
    earthquakeList.value = res.rows.slice(0, 5);
  }
};

getInfo();
</script>

<style lang="scss" scoped>
@use '../style.scss';
</style>
